<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" style="top:5px;" title="库位选择列表" width="60%">
    <el-row :gutter="6">
      <el-col v-if="!warehouseId" :span="12">
        <el-input
          v-model="filterTree"
          clearable
          placeholder="输入关键字进行过滤" />
        <el-tree
          ref="selectTree"
          :data="treeData"
          :props="{children: 'children', label: 'warehouseName', hasChildren: 'hasChildren'}"
          :filter-node-method="filterTreeNode"
          :highlight-current="true"
          node-key="id"
          default-expand-all
          @node-click="handleTreeClick"
        >
          <span slot-scope="{ node, data }">
            <svg-icon icon-class="image"/>
            {{ data.warehouseName }}
          </span>
        </el-tree>
      </el-col>
      <el-col :span="12">
        <!--表格渲染-->
        <DataGridTable
          v-loading="loading"
          :sup_this="sup_this"
          :data="data.rtnList"
          :total="total"
          :multi-select="false"
          :show-row-number="true"
          grid-id="storageLocationSelectListGridId"
          style="width: 100%"
          height="400"
          max-height="500"
          @current-change="handleCurrentChange">
          <el-table-column v-if="multiSelect" prop="id" width="90px">
            <template slot="header" slot-scope="scope">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange" />
            </template>
            <template slot-scope="scope">
              <el-button v-if="selectedRows[scope.row.id]" type="danger" size="mini" @click="checkSelectChange(scope.row)">取消</el-button>
              <el-button v-else type="primary" size="mini" @click="checkSelectChange(scope.row)">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="库位编号">
            <template slot="header" slot-scope="scope">
              <el-input v-model="paramBean.id" clearable placeholder="回车过滤" style="width: 100%;" class="filter-item" @keyup.enter.native="filterQuery"/>
            </template>
          </el-table-column>
          <el-table-column prop="slName" label="名称">
            <template slot="header" slot-scope="scope">
              <el-input v-model="paramBean.slName" clearable placeholder="输入名称回车过滤" style="width: 100%;" class="filter-item" @keyup.enter.native="filterQuery"/>
            </template>
          </el-table-column>
          <DataGridColumn prop="thirdCode" label="编号" />
        </DataGridTable>
      </el-col>
    </el-row>
    <div slot="footer" class="modal-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import initData from '@/mixins/initData'
import { loadDataUrl } from '@/api/base/storageLocation'
import { getWarehouseByCpyCode } from '@/api/base/warehouse'

export default {
  mixins: [initData],
  props: {
    multiSelect: {
      default: false,
      requried: false,
      type: Boolean
    },
    warehouseId: {
      default: null,
      requried: false,
      type: String
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      paramData: {},
      selectedRows: [],
      selectedRow: {},
      sup_this: this,
      treeData: [],
      filterTree: '',
      checkAll: false
    }
  },
  watch: {
    filterTree(val) {
      const _thisTree = this.$refs.selectTree
      if (_thisTree) {
        _thisTree.filter(val)
      }
    }
  },
  created() {
    getWarehouseByCpyCode('').then(res => {
      this.treeData = res.data
      const allObject = { id: '', warehouseName: '+所有仓库' }
      this.treeData.unshift(allObject)
    })
    this.url = loadDataUrl()
  },
  mounted() {
  },
  methods: {
    initLoadData(paramData) {
      this.checkAll = false
      this.selectedRows = []
      this.selectedRow = {}
      this.init()
      this.dialog = true
      this.paramData = paramData
    },
    async beforeInit() {
      this.paramBean.warehouseId = this.warehouseId
      return true
    },
    afterInit(res) {
    },
    filterQuery() {
      this.init()
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    doSubmit() {
      this.loading = true
      if (this.multiSelect) {
        const _selectRows = this.selectedRows
        const tmpKeys = Object.keys(_selectRows)
        const tmpRows = []
        for (const tmpKey of tmpKeys) {
          tmpRows.push(_selectRows[tmpKey])
        }
        this.$emit('slSelectCallback', tmpRows, this, this.paramData)
      } else {
        this.$emit('slSelectCallback', this.selectedRow, this, this.paramData)
      }
    },
    cancel() {
      this.checkAll = false
      this.selectedRows = []
      this.selectedRow = {}
      this.dialog = false
      this.loading = false
    },
    handleCurrentChange(val) {
      this.selectedRow = val
    },
    handleCheckAllChange(isChecked) {
      const tmpSelectRows = this.selectedRows
      if (isChecked) {
        this.data.rtnList.forEach(row => {
          tmpSelectRows[row.id] = row
        })
      } else {
        // 取消
        this.data.rtnList.forEach(row => {
          delete tmpSelectRows[row.id]
        })
      }
      this.selectedRows.splice(this.selectedRows.length)
    },
    checkSelectChange(row) {
      if (!this.selectedRows[row.id]) {
        // 选择
        this.selectedRows[row.id] = row
      } else {
        delete this.selectedRows[row.id]
      }
      this.selectedRows.splice(this.selectedRows.length)
    },
    handleTreeClick(data) {
      this.paramBean.warehouseId = data.id
      this.init()
    },
    filterTreeNode(value, data) {
      if (!value) return true
      return data.warehouseName.indexOf(value) !== -1
    }
  }
}
</script>
